<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo" style="text-align: center;">
            <h3 style="color:white;top:-13px;">ToDoNow</h3>
          </div>
          <div class="layout-nav" style="width:700px;height:50px;">
            <MenuItem name="0" style="top:6px;color:black;left: -250px;top: 10px;">
            <!-- 显示天气 -->
            <weather></weather>
            </MenuItem>
            <MenuItem name="1" @click="home">
            <Icon type="ios-navigate"></Icon>
            首页
            </MenuItem>
            <MenuItem name="2" @click="showinsert">
            <Icon type="ios-keypad"></Icon>
            添加日程
            </MenuItem>
            <!-- 添加页面 Start -->
            <a-modal hide-cancel="true" ontext v-model:visible="visible" title="添加待办" @cancel="handleCancel">
              <div style="width:200px;">
                <a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '480px' }"
                  @submit="handleSubmit">
                  <a-form-item field="theme" label="主题"
                    :rules="[{ required: true, message: '请填写主题' }, { message: '输入待办主题' }]"
                    :validate-trigger="['change', 'input']">
                    <a-input v-model="form.theme" placeholder="输入待办主题" />
                  </a-form-item>

                  <a-form-item field="content" label="待办内容"
                    :rules="[{ required: true, message: '请填写内容' }, { message: '输入待办事项' }]"
                    :validate-trigger="['change', 'input']">
                    <a-input v-model="form.content" placeholder="输入待办事项" />
                  </a-form-item>
                  <a-form-item label="时间">
                    <a-range-picker style="width: 420px; margin: 0 24px 24px 0;" show-time format="YYYY-MM-DD HH:mm"
                      @change="onChange" @select="onSelect" @ok="onOk" />
                  </a-form-item>
                  <a-form-item field="address" label="地点" style="top: -20px;"
                    :rules="[{ required: true, message: '请填写地点' }, { message: '输入地点' }]"
                    :validate-trigger="['change', 'input']">
                    <a-input v-model="form.address" placeholder="输入地点" />
                  </a-form-item>
                  <a-form-item field="section" label="搭档" style="top: -20px;" :rules="[{ message: 'must select one' }]">
                    <a-select v-model="form.section" placeholder="请选择搭档">
                      <a-option value="">不选</a-option>
                      <a-option value="张三">张三</a-option>
                      <a-option value="李四">李四</a-option>
                      <a-option value="王五">王五</a-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item field="radio" label="类别" style="top: -20px;" :rules="[{ message: 'must select one' }]">
                    <a-radio-group v-model="form.radio">
                      <a-radio value="生活">生活</a-radio>
                      <a-radio value="娱乐">娱乐</a-radio>
                      <a-radio value="工作">工作</a-radio>
                      <a-radio value="学习">学习</a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item>
                    <a-space>
                      <a-button html-type="submit">提交</a-button>&nbsp&nbsp
                      <a-button @click="$refs.formRef.resetFields()">重置</a-button>
                    </a-space>
                  </a-form-item>
                </a-form>
              </div>
              <template #footer>
                <div></div>
              </template>

            </a-modal>
            <!-- 添加页面 END -->

            <MenuItem name="3" @click="search">
            <Icon type="ios-analytics"></Icon>
            查询
            </MenuItem>
            <!-- 
            <MenuItem name="4">
            <Icon type="ios-paper"></Icon>
            Item 4
            </MenuItem> -->

            <a-space size="large">
              <a-dropdown trigger="hover">
                <MenuItem name="4">
                <Space size="large" wrap>
                  <Avatar :src="user.userInfo.avatar" />
                </Space>
                </MenuItem>
                <template #content>
                  <a-doption @click="myinfo">我的信息</a-doption>
                  <a-doption @click="quit">退出</a-doption>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </Menu>
      </Header>
      <Layout style="height:900px;">
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template #title>
                <Icon type="ios-navigate"></Icon>
                操作
              </template>
              <MenuItem name="1-1" @click="home">首页</MenuItem>
              <MenuItem name="1-2" @click="byWeek">按周查看</MenuItem>
              <MenuItem name="1-3" @click="byDay">按日查看</MenuItem>
              <MenuItem name="1-4" @click="getCount">查看效率</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px' }">
          <Breadcrumb :style="{ margin: '24px 0' }">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
            <BreadcrumbItem>Layout</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{ padding: '24px', minHeight: '280px', background: '#fff' }">
            <!-- 显示的内容 -->
            <RouterView></RouterView>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
  <!-- 我的信息 -->
  <myInfo v-model="infovisible"></myInfo>
  <!-- 查询页面 -->
  <Search v-model="searchvisible"></Search>
</template>
<script>
import weather from '@/views/utils/weatherShow.vue'
import Calendar from '@/views/Calendar/calendar.vue'
import Search from '@/views/Form/search.vue'
import { reactive } from 'vue';
import { ref, computed } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import router from '@/router'
import myInfo from '@/views/Form/myInfo.vue'
import userCount from '@/stores/userCount';
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus'
export default {
  components: {
    Calendar,
    myInfo,
    weather,
    Search
  },
  setup() {
    let alltodoList = reactive()
    const route = useRoute()
    let user = userCount()
    let visible = ref(false)
    let infovisible = ref(false)
    let searchvisible = ref(false)

    const store = userCount();
    const { getCount } = store

    const form = reactive({
      theme: '',
      content: '',
      address: '',
      section: '',
      date: '',
      time: '',
      radio: '生活',
    });

    let startDate = ref('0')
    let endDate = ref('0')
    /* 页面跳转 */
    /* 主页 */
    const home = () => {
      router.push('/mainMenu')
    }
    /* 按周 */
    const byWeek = () => {
      router.push('/week')
    }
    /* 按日 */
    const byDay = () => {
      router.push('/day')
    }

    /* 查看本人信息 */
    const myinfo = () => {
      infovisible.value = true
      console.log(infovisible.value);
    }
    /* 查询弹框 */
    const search = () => {
      searchvisible.value = true
      console.log("search");
      console.log(searchvisible.value);
    }

    /* 提交代办 */
    const handleSubmit = ({ values, errors }) => {
      axios.post('http://localhost:8080/content/addTodo', {
        "userId": user.userid,
        "theme": values.theme,
        "content": values.content,
        "address": values.address,
        "startDate": startDate,
        "endDate": endDate,
        "type": values.radio,
        "partner": values.section,
        "status": 0
      }).then(resp => {
        user.todolist = resp.data
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        visible.value = false
      })
    }

    function onOk(dateString) {
      startDate = dateString[0],
        endDate = dateString[1]
      console.log(startDate)
      console.log(endDate)
    }
    let status = ref(false)

    function addstatus() {
      status.value = !status.value
      console.log(status);
    }


    const showinsert = () => {
      visible.value = true
      console.log(visible.value);
    };

    const handleCancel = () => {
      visible.value = false;
    }

    const quit = () => {
      router.push('/login')
    }

    return {
      form,
      handleSubmit,
      onOk,
      startDate,
      endDate,
      addstatus,
      status,
      visible,
      showinsert,
      handleCancel,
      route,
      user,
      home,
      byWeek,
      byDay,
      myinfo,
      infovisible,
      visible,
      getCount,
      search,
      searchvisible,
      quit
    }
  }
}
</script>
<style>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width: 1248px;
  height: 880px;
  left: -25px;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>